Ext.define('NIM.view.UserAdministration.User_management', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.user_UserAdministration',
    id: 'user_UserAdministration',
    title : 'User Management',
    border: false,
    height: 590,
    closable: true,
    layout: {
        type: 'border'
    },

    items: [
         {
                xtype: 'form',
                id: 'ConfigUserList',
                title: 'Configuration',
                region: 'west',
                margin: '5 5 5 5',
                method: 'POST',
                url: './Services/Security/User/Add',
                collapsed: true,
                collapsible: true,
                width: 450,
                items: [
                    {
          		          xtype : 'hiddenfield',
          		          cls : 'black',
          		          id : 'cekstatususer',
          		          name : 'CEKSTATUS',
          		          margin : '5 10 5 25',
          		          labelWidth : 100 / 1366 * screen.width,
          		          width : 300 / 1366 * screen.width,
          		          fieldLabel : 'Site ID',
          		          msgTarget : 'title',
          		          allowBlank : true,
          		          validateBlank : false
          	
          	       },
    	           {
			            xtype: 'textfield',
		            	cls: 'black',
		            	id: 'UsernameList',
		            	name :'USERNAME',
			            emptyText: 'Input Your Username',
			            margin: '15 10 10 10',
			            labelWidth: 130/1366*screen.width,
			            width: 325/1366*screen.width,
			            fieldLabel: 'USERNAME',
			            msgTarget: 'title',
		                editable: false,
			         	allowBlank: false, 
			            allowOnlyWhitespace: false
    	           },
    	           {
			            xtype: 'textfield',
		            	cls: 'black',
		            	//id: 'AliasList',
		            	name : 'ALIAS',
			            emptyText: 'Input Your Alias',
			            margin: '10 10 10 10',
			            labelWidth: 130/1366*screen.width,
			            width: 325/1366*screen.width,
			            fieldLabel: 'ALIAS',
			            msgTarget: 'title',
		                editable: false,
			         	allowBlank: false, 
			            allowOnlyWhitespace: false
    	           },
    	           {
			            xtype: 'textfield',
		            	cls: 'black',
		            	//id: 'EmailList',
		            	name : 'EMAIL',
		                vtype:'email',
			            emptyText: 'Input Your Email',
			            margin: '10 10 10 10',
			            labelWidth: 130/1366*screen.width,
			            width: 325/1366*screen.width,
			            fieldLabel: 'EMAIL',
			            msgTarget: 'title',
		                editable: false,
			         	allowBlank: false, 
			            allowOnlyWhitespace: false
    	           },
    	           {
			            xtype: 'textfield',
		            	cls: 'black',
		            	//id: 'PhoneList',
		            	name : 'PHONE',
			            emptyText: 'Input Your Phone Number',
			            margin: '10 10 10 10',
			            labelWidth: 130/1366*screen.width,
			            width: 325/1366*screen.width,
			            fieldLabel: 'PHONE',
			            msgTarget: 'title',
		                editable: false,
			         	allowBlank: false, 
			            allowOnlyWhitespace: false
    	           },
    	           {
			            xtype: 'textfield',
		            	cls: 'black',
		            	id: 'PasswordList',
			            emptyText: 'Input Your Password',
			            margin: '10 10 10 10',
			            name   : 'PASSWORD',
			            inputType: 'password',
			            labelWidth: 130/1366*screen.width,
			            width: 325/1366*screen.width,
			            fieldLabel: 'PASSWORD',
			            msgTarget: 'title',
		                editable: false,
			         	allowBlank: false, 
			            allowOnlyWhitespace: false
    	           },
    	           {
			            xtype: 'textfield',
		            	cls: 'black',
		            	id: 'ConfirmPasswordList',
			            emptyText: 'Confirm Your Password',
			            margin: '10 10 10 10', 
		            	name  : 'PASSWORD',
			            inputType: 'password',
			            labelWidth: 130/1366*screen.width,
			            width: 325/1366*screen.width,
			            fieldLabel: 'CONFIRM PASSWORD',
			            msgTarget: 'title',
		                editable: false,
			         	allowBlank: false, 
			            allowOnlyWhitespace: false
    	           },
    	           {
    	        	   xtype: 'fieldcontainer',
    	               cls: 'black',
    	               margin: '10 10 10 10',
    	               fieldLabel : 'ACTIVE',
    	               labelWidth: 130/1366*screen.width,
    	               width: 325/1366*screen.width,
    	               defaultType: 'radiofield',
    	               defaults: {
    	                   flex: 1
    	               },
    	               layout: 'hbox',
    	               items: [
    	                   {
    	                       boxLabel  : 'Yes',
    	                       //id: 'YesActiveList',
    	                       name      : 'ACTIVE',
    	                       inputValue: '1'
    	                   }, 
    	                   {
    	                       boxLabel  : 'No',
    	                       //id: 'NoActiveList',
    	                       name      : 'ACTIVE',
    	                       inputValue: '0'
    	                   }
    	               ]
    	           },
    	           {
                        xtype: 'itemselector',
                        id: 'listusergroup',
                        name : 'LISTGROUP',
                        width: 325/1366*screen.width,
                        labelWidth: 130/1366*screen.width,
                        height: 200/768*screen.height,
                        margin: '5 10 10 10',
                        fieldLabel: 'GROUPS',
                        labelAlign: 'top',
                        store:'User_Management.GroupUser',
                        allowBlank: false,
                        displayField: 'GROUPNAME',
                        valueField: 'GROUPNAME',
                        fromTitle: 'Available',
                        toTitle: 'Selected',
                        msgTarget: 'side',
    	           },	
    	           {
		                xtype: 'button',
		                id: 'ButtonUserList',
			            margin: '5 10 10 10',
		                width: 50/1366*screen.width,
		                text: 'Insert',
		                handler: function() {
    	        	    var password = Ext.getCmp("PasswordList").getValue();
    	        	    var passwordconf = Ext.getCmp("ConfirmPasswordList").getValue();
    	        	    if (password !=passwordconf){
    	        	    	Ext.MessageBox.show({
                    		 	title: 'WARNING!',
                    	        msg: 'Please Cek Your Password',
                    	        icon: Ext.Msg.WARNING
                    	    });	
    	        	    }else{
    	        	    	this.up('form').getForm().submit({
                                waitMsg: 'Please Wait ....',
                                success: function (form, action) {
                                    afterSubmitInformation(form, action);
                                    Ext.getCmp('ConfigUserList').getForm().reset();
                                    Ext.getCmp('ButtonUserList').setText('Insert');
                                    Ext.getCmp ('UsernameList').setDisabled(true);
                                },
                                failure: function (form, action) {
                                    afterSubmitInformation(form, action);
                                    Ext.getStore('User_Management.Listuser_Store').getProxy().url = './Services/Security/User/List';
                                    Ext.getStore('User_Management.Listuser_Store').load(); 
                                    Ext.getCmp('ConfigUserList').getForm().reset();
                                    Ext.getCmp('ButtonUserList').setText('Insert');
                                    Ext.getCmp ('UsernameList').setDisabled(false);
                                 
                                }
                            });
    	        	    	
    	        	    }
		                }
    	           },
    	           {
		                xtype: 'button',
			            margin: '5 10 10 0',
		            	width: 50/1366*screen.width,
		                text: 'Clear',
		            	handler: function() {
    	        	   		Ext.getCmp('ConfigUserList').getForm().reset();
    	        	   		Ext.getCmp('ButtonUserList').setValue("Insert");
    	        	   		Ext.getCmp ('UsernameList').setDisabled(false);
		            	}
    	           }
                ]
            },
  
   
    {
            xtype: 'gridpanel',
            region: 'center',
            height: 590,
            id    : 'tableuserlist',
            width : 400,
            titleAlign :'center',
            margin: '5 5 5 0',
            border : true,
            forceFit: true,
            columnLines: true,
            selType: 'checkboxmodel',
            store: 'User_Management.Listuser_Store',
            title: 'User List',
		    columns: [
				    { dataIndex: 'USERNAME', text: 'Username', align: 'center' },
				    { dataIndex: 'ALIAS', text: 'Alias', align: 'center' },
				    { dataIndex: 'EMAIL', text: 'Email', align: 'center' },
				    { dataIndex: 'PHONE', text: 'Phone', align: 'center' },
				//  { dataIndex: 'GROUPNAME', text: 'Group', align: 'center'
				    {
                	    xtype: 'actioncolumn',
                	    text : 'Status',
                	    align : 'center',
                	    renderer: function (value, metadata, record) {
                	    	var document = record.get('ACTIVE');
                	    	console.log (document);
                	    	if (document=="1"){
                	    		this.items[0].icon = 'images/enable.png';
                	    	}else{
                	    		this.items[0].icon = 'images/close.png';
                	    	}
                	    }
                	}
              	    
		        ],
		        
	        dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    store: 'User_Management.Listuser_Store',
                    displayInfo: true
                },
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'KEYWORD',
                            id: 'keyworduser',
                            margin: '0 0 0 10',
                            enableKeyEvents: true,
                            listeners: {
                                keypress: function (form, e) {
                                    if (e.getKey() == 13) {
                                    	var keyword = Ext.getCmp('keyworduser').getValue();
                                    	Ext.getStore('User_Management.Listuser_Store').getProxy().url = "./Services/Security/User/Search?username="+keyword;
                                    	Ext.getStore('User_Management.Listuser_Store').load();
                                    }

                                }
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'SEARCH',
                            margin: '0 30 0 0',
                            handler: function () {
                        	var keyword = Ext.getCmp('keyworduser').getValue();
                        	Ext.getStore('User_Management.Listuser_Store').getProxy().url = "./Services/Security/User/Search?username="+keyword;
                        	Ext.getStore('User_Management.Listuser_Store').load();
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'ADD NEW',
                            margin: '0 20 0 0',
                            handler: function () {
                                if (Ext.getCmp('ConfigUserList').hidden == true)
                                    Ext.getCmp('ConfigUserList').toggleCollapse(true);
                                Ext.getCmp ("ButtonUserList").setText("Insert");
                                Ext.getCmp ('UsernameList').setDisabled(false);
                            }

                        },
                        {
                            xtype: 'button',
                            text: 'DELETE',
                            margin: '0 20 0 0',
                            handler: function () {
                            	var rec = Ext.getCmp('tableuserlist').getSelectionModel().getSelection();
                            	if (rec.length>0){
                            		  Ext.MessageBox.confirm('Delete', 'Are you sure ?', function(btn) {
                            		        if (btn === 'yes') {
                            		        	 for (var i = 0; i<rec.length ; i++){
                            		     	    	var id = rec[i].get('USERNAME');
                            		     	    	var data = {USERNAME: id};
                            		     	    	var url  = './Services/Security/User/Delete';
                            		     	    	PostData(data,url,"Delete");
                            		     	    	Ext.getStore('User_Management.Listuser_Store').getProxy().url = './Services/Security/User/List';
                                                    Ext.getStore('User_Management.Listuser_Store').load(); 
                            		     	    }
                            		        
                            		        }
                            		    });
                            	}else{
                                	Ext.MessageBox.show({
                            		 	title: 'WARNING!',
                            	        msg: 'No Data Selected',
                            	        icon: Ext.Msg.WARNING
                            	    });	
                                }
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'REFRESH',
                            handler: function () {
                        	Ext.getStore('User_Management.Listuser_Store').getProxy().url = './Services/Security/User/List';
                            Ext.getStore('User_Management.Listuser_Store').load(); 
                            }
                        }
                    ]
                }
            ],
            listeners: {
			    itemdblclick: function(grid, record) {
            	var username = record.get('USERNAME');
		    	Ext.getCmp ('UsernameList').setDisabled(true);
		    	Ext.getCmp("cekstatususer").setValue(username);
		    	Ext.getCmp ("ButtonUserList").setText("Update");
            		if(Ext.getCmp('ConfigUserList').hidden == true) Ext.getCmp('ConfigUserList').toggleCollapse(true);
            		Ext.Ajax.request({
            		    method: "GET",
            		    dataType: "json",
            		    url: "./Services/Security/User/GetUser?username="+username,
            		    async: false	,
            		    success: function(c) {
            		    	var jsonResults= $.parseJSON(c.responseText);
            		    	data = jsonResults.item[0];
            		    	console.log (data);
            		    	Ext.getCmp('ConfigUserList').getForm().setValues(data);
            		        }
            		    });	
            		
            		  var url = './Services/Security/User/Group/'+username;
                      var userall = Ext.create('Ext.data.Store', {
                          fields: ['GROUPNAME'],
                          autoLoad: true,
                          proxy: {
                              type: 'ajax',
                              url: url,
                              reader: {
                                  type: 'json',
                                  root: 'item',
                                  successProperty: 'success'
                              }
                          }
                      });
                      userall.on({
                          load: function() {
                              var data_user = userall.getRange();
                              var selected = [];
                              for (var i = 0; i < data_user.length; i++) {
                                  var id_coll = data_user[i].get('GROUPNAME');
                                  selected.push(id_coll);
                              }
                              Ext.getCmp('listusergroup').setValue(selected);
                              //Ext.getCmp('select').setValue(value_selected);
                          }
                      });
            		
			        
			    	 },
			    	 
			    	afterrender:function (){
	
			    		Ext.getStore('User_Management.Listuser_Store').getProxy().url = './Services/Security/User/List';
                        Ext.getStore('User_Management.Listuser_Store').load(); 
			    	 }

            	},
            
    
    }
    ]

});